<template>
  <div :style="isWidth">
    <div style="width:100%;background-color:#ffb93e;height:28px;"
      @click="collapseMenu">
      <img src="@/assets/menu.png"
        style="float:left;margin:8px 46%;"
        alt />
    </div>

    <el-row class="tac">
      <el-col :span="24">
        <el-menu default-active="2"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          router
          :collapse='isMenu'
          :collapse-transition='false'
          background-color="#ff781b">

          <el-submenu index="20">
            <template slot="title">
              <span style="margin-left:26px;color:#fff">数据看板</span>
            </template>
            <el-menu-item index="kpi">
              <img src="@/assets/kpi.png"
                class="icon" />
              <span slot="title">KPI指标</span>
            </el-menu-item>
            <el-menu-item index="3">
              <img src="@/assets/analyse.png"
                class="icon" />
              <span slot="title">流失分析</span>
            </el-menu-item>
            <el-menu-item index="channel">
              <img src="@/assets/channel.png"
                class="icon" />
              <span slot="title">渠道分析</span>
            </el-menu-item>
          </el-submenu>
          <el-divider></el-divider>

          <el-submenu index='30'>
            <template slot="title">
              <span style="margin-left:26px;color:#fff">用户标签</span>
            </template>
            <el-menu-item index="tag">
              <img src="@/assets/tag.png"
                class="icon" />
              <span slot="title">标签视图</span>
            </el-menu-item>
            <el-menu-item index="tagedit">
              <img src="@/assets/edit.png"
                class="icon" />
              <span slot="title">标签编辑管理</span>
            </el-menu-item>
            <el-menu-item index="user">
              <img src="@/assets/file.png"
                class="icon" />
              <span slot="title">用户全息档案</span>
            </el-menu-item>
          </el-submenu>

          <el-divider></el-divider>
          <el-submenu index='40'>
            <template slot="title">
              <span style="margin-left:26px;color:#fff">用户行为分析</span>
            </template>
            <el-menu-item index="event">
              <img src="@/assets/echart.png"
                class="icon" />
              <span slot="title">事件分析</span>
            </el-menu-item>
            <el-menu-item index="/keep">
              <img src="@/assets/keep.png"
                class="icon" />
              <span slot="title">留存分析</span>
            </el-menu-item>
            <el-menu-item index="funnel">
              <img src="@/assets/funnel.png"
                class="icon" />
              <span slot="title">漏斗分析</span>
            </el-menu-item>
            <el-menu-item index="13">
              <img src="@/assets/spread.png"
                class="icon" />
              <span slot="title">分布分析</span>
            </el-menu-item>
            <el-menu-item index="14">
              <img src="@/assets/router.png"
                class="icon" />
              <span slot="title">用户行为路径</span>
            </el-menu-item>
          </el-submenu>

          <el-divider></el-divider>
          <el-submenu>
            <template slot="title">
              <span style="margin-left:26px;color:#fff">用户人群</span>
            </template>
            <el-menu-item index="group">
              <img src="@/assets/group.png"
                class="icon" />
              <span slot="title">用户分群</span>
            </el-menu-item>
            <el-menu-item index="crowd">
              <img src="@/assets/people.png"
                class="icon" />
              <span slot="title">人群分析</span>
            </el-menu-item>
          </el-submenu>
          <el-divider></el-divider>
          <el-menu-item index="18">
            <img src="@/assets/mannagement.png"
              class="icon" />
            <span slot="title">管理</span>
          </el-menu-item>
        </el-menu>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data () {
    return {
      isMenu: false,
      isWidth: {
        width: '200px'
      }
    }
  },
  methods: {
    handleOpen (key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath);
    },
    collapseMenu () {
      this.isMenu = !this.isMenu
      if (this.isMenu) {
        this.isWidth.width = '64px'
      } else {
        this.isWidth.width = '200px'
      }
    }
  },
};
</script>

<style scoped>
.el-menu {
  background-color: rgba(255, 255, 255, 0);
  border: none;
}
.el-menu-item {
  height: 36px;
  line-height: 36px;
  color: #fff;
}
.icon {
  width: 18px;
  height: 18px;
  margin-right: 10px;
  margin-left: 26px;
}
.el-divider--horizontal {
  width: 90%;
  margin: 10px;
  background-color: rgba(255, 255, 255, 0.3);
}
.el-menu-item:hover {
  background-color: rgba(255, 243, 234, 0.3);
}
</style>
